<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        warning: '#FF9F1C',
                        danger: '#F87272',
                        neutral: '#F3F4F6',
                        'neutral-dark': '#4B5563',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.5s ease-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes slideUp {
                from { transform: translateY(20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-md fixed top-0 left-0 right-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <div class="text-primary mr-2">
                    <i class="fa fa-graduation-cap text-2xl"></i>
                </div>
                <h1 class="text-xl font-bold text-primary">考试管理系统</h1>
            </div>

            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>

                <button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                    <i class="fa fa-bell-o text-gray-600"></i>
                </button>

                <div class="flex items-center space-x-2">
                    <img src="https://picsum.photos/id/64/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary">
                    <span class="hidden md:inline-block text-sm font-medium">管理员</span>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="flex pt-16">
    <!-- 侧边栏 -->
    <aside class="w-16 md:w-64 bg-white shadow-lg fixed left-0 top-16 bottom-0 transition-all duration-300 z-40">
        <nav class="h-full flex flex-col">
            <div class="py-4 overflow-y-auto">
                <div class="px-4 mb-4">
                    <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider hidden md:block">主菜单</h2>
                </div>

                <a href="#" class="flex items-center px-4 py-3 sidebar-item-active group transition-all">
                    <i class="fa fa-tachometer text-lg w-6"></i>
                    <span class="ml-2 hidden md:inline-block">仪表盘</span>
                </a>

                <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 group transition-all">
                    <i class="fa fa-users text-lg w-6 text-gray-600 group-hover:text-primary transition-colors"></i>
                    <span class="ml-2 hidden md:inline-block text-gray-700">考生管理</span>
                </a>

                <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 group transition-all">
                    <i class="fa fa-file-text-o text-lg w-6 text-gray-600 group-hover:text-primary transition-colors"></i>
                    <span class="ml-2 hidden md:inline-block text-gray-700">试卷管理</span>
                </a>

                <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 group transition-all">
                    <i class="fa fa-calendar-check-o text-lg w-6 text-gray-600 group-hover:text-primary transition-colors"></i>
                    <span class="ml-2 hidden md:inline-block text-gray-700">考试安排</span>
                </a>

                <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 group transition-all">
                    <i class="fa fa-bar-chart text-lg w-6 text-gray-600 group-hover:text-primary transition-colors"></i>
                    <span class="ml-2 hidden md:inline-block text-gray-700">成绩统计</span>
                </a>

                <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-50 group transition-all">
                    <i class="fa fa-cog text-lg w-6 text-gray-600 group-hover:text-primary transition-colors"></i>
                    <span class="ml-2 hidden md:inline-block text-gray-700">系统设置</span>
                </a>
            </div>

            <div class="mt-auto border-t border-gray-200 p-4">
                <a href="#" class="flex items-center px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors">
                    <i class="fa fa-sign-out text-gray-600 w-6"></i>
                    <span class="ml-2 hidden md:inline-block text-gray-700">退出登录</span>
                </a>
            </div>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 ml-16 md:ml-64 p-6 transition-all duration-300">
        <div class="container mx-auto">
            <!-- 页面标题 -->
            <div class="mb-8 animate-fade-in">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">考试管理仪表盘</h2>
                <p class="text-gray-600 mt-1">欢迎回来，管理员！今日有 2 场考试安排</p>
            </div>

            <!-- 数据卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all duration-300 animate-slide-up" style="animation-delay: 0.1s">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">总考生数</p>
                            <h3 class="text-3xl font-bold mt-1">2,548</h3>
                            <p class="text-secondary text-sm mt-2">
                                <i class="fa fa-arrow-up"></i> 12% <span class="text-gray-500">较上月</span>
                            </p>
                        </div>
                        <div class="bg-primary/10 p-3 rounded-lg">
                            <i class="fa fa-users text-primary text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all duration-300 animate-slide-up" style="animation-delay: 0.2s">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">已创建试卷</p>
                            <h3 class="text-3xl font-bold mt-1">156</h3>
                            <p class="text-secondary text-sm mt-2">
                                <i class="fa fa-arrow-up"></i> 5% <span class="text-gray-500">较上月</span>
                            </p>
                        </div>
                        <div class="bg-secondary/10 p-3 rounded-lg">
                            <i class="fa fa-file-text-o text-secondary text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all duration-300 animate-slide-up" style="animation-delay: 0.3s">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">进行中考试</p>
                            <h3 class="text-3xl font-bold mt-1">4</h3>
                            <p class="text-danger text-sm mt-2">
                                <i class="fa fa-arrow-down"></i> 3% <span class="text-gray-500">较上月</span>
                            </p>
                        </div>
                        <div class="bg-warning/10 p-3 rounded-lg">
                            <i class="fa fa-calendar-check-o text-warning text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-all duration-300 animate-slide-up" style="animation-delay: 0.4s">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">平均通过率</p>
                            <h3 class="text-3xl font-bold mt-1">82%</h3>
                            <p class="text-secondary text-sm mt-2">
                                <i class="fa fa-arrow-up"></i> 8% <span class="text-gray-500">较上月</span>
                            </p>
                        </div>
                        <div class="bg-danger/10 p-3 rounded-lg">
                            <i class="fa fa-bar-chart text-danger text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表和表格区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                <!-- 考试趋势图表 -->
                <div class="bg-white rounded-xl p-6 shadow-md lg:col-span-2 animate-slide-up" style="animation-delay: 0.5s">
                    <div class="flex items-center justify-between mb-6">
                        <h3 class="font-semibold text-lg">考试趋势分析</h3>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">本月</button>
                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-colors">季度</button>
                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-600 rounded-full hover:bg-gray-200 transition-colors">年度</button>
                        </div>
                    </div>
                    <div class="h-80">
                        <canvas id="examTrendChart"></canvas>
                    </div>
                </div>

                <!-- 考试类型分布 -->
                <div class="bg-white rounded-xl p-6 shadow-md animate-slide-up" style="animation-delay: 0.6s">
                    <h3 class="font-semibold text-lg mb-6">考试类型分布</h3>
                    <div class="h-80">
                        <canvas id="examTypeChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 考试安排表格 -->
            <div class="bg-white rounded-xl shadow-md p-6 mb-8 animate-slide-up" style="animation-delay: 0.7s">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="font-semibold text-lg">近期考试安排</h3>
                    <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center">
                        <i class="fa fa-plus mr-2"></i> 新建考试
                    </button>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                        <tr class="border-b border-gray-200">
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">考试名称</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">科目</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">考生人数</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-4 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="h-8 w-8 bg-primary/10 rounded-full flex items-center justify-center">
                                        <i class="fa fa-file-text-o text-primary"></i>
                                    </div>
                                    <div class="ml-3">
                                        <div class="text-sm font-medium text-gray-900">期末综合考试</div>
                                        <div class="text-xs text-gray-500">ID: EXM-20250610</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">数学</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">2025-06-10</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">14:00-16:00</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">120</td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">即将开始</span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                <button class="text-gray-600 hover:text-gray-900">编辑</button>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-4 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="h-8 w-8 bg-primary/10 rounded-full flex items-center justify-center">
                                        <i class="fa fa-file-text-o text-primary"></i>
                                    </div>
                                    <div class="ml-3">
                                        <div class="text-sm font-medium text-gray-900">英语听力测试</div>
                                        <div class="text-xs text-gray-500">ID: EXM-20250612</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">英语</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">2025-06-12</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">09:00-10:30</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">85</td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">即将开始</span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                <button class="text-gray-600 hover:text-gray-900">编辑</button>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-4 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="h-8 w-8 bg-gray-100 rounded-full flex items-center justify-center">
                                        <i class="fa fa-file-text-o text-gray-500"></i>
                                    </div>
                                    <div class="ml-3">
                                        <div class="text-sm font-medium text-gray-900">物理实验考试</div>
                                        <div class="text-xs text-gray-500">ID: EXM-20250605</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">物理</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">2025-06-05</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">15:00-17:00</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">63</td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已完成</span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                <button class="text-gray-600 hover:text-gray-900">编辑</button>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-4 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="h-8 w-8 bg-gray-100 rounded-full flex items-center justify-center">
                                        <i class="fa fa-file-text-o text-gray-500"></i>
                                    </div>
                                    <div class="ml-3">
                                        <div class="text-sm font-medium text-gray-900">化学理论考试</div>
                                        <div class="text-xs text-gray-500">ID: EXM-20250603</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">化学</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">2025-06-03</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">10:00-12:00</td>
                            <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-700">92</td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已完成</span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button class="text-primary hover:text-primary/80 mr-3">查看</button>
                                <button class="text-gray-600 hover:text-gray-900">编辑</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="mt-4 flex justify-between items-center">
                    <div class="text-sm text-gray-700">
                        显示 1 到 4 条，共 24 条记录
                    </div>
                    <div class="flex space-x-1">
                        <button class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled>上一页</button>
                        <button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
                        <button class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">2</button>
                        <button class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">3</button>
                        <button class="px-3 py-1 rounded border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">下一页</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<script>
    // 考试趋势图表
    const trendCtx = document.getElementById('examTrendChart').getContext('2d');
    const trendChart = new Chart(trendCtx, {
        type: 'line',
        data: {
            labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
            datasets: [
                {
                    label: '已完成考试',
                    data: [12, 19, 15, 20, 18, 25],
                    borderColor: '#165DFF',
                    backgroundColor: 'rgba(22, 93, 255, 0.1)',
                    tension: 0.3,
                    fill: true
                },
                {
                    label: '参与考生',
                    data: [210, 320, 270, 380, 340, 420],
                    borderColor: '#36D399',
                    backgroundColor: 'rgba(54, 211, 153, 0.1)',
                    tension: 0.3,
                    fill: true
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // 考试类型分布图表
    const typeCtx = document.getElementById('examTypeChart').getContext('2d');
    const typeChart = new Chart(typeCtx, {
        type: 'doughnut',
        data: {
            labels: ['理论考试', '实践考试', '在线测试', '面试'],
            datasets: [{
                data: [45, 25, 20, 10],
                backgroundColor: [
                    '#165DFF',
                    '#36D399',
                    '#FF9F1C',
                    '#F87272'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            },
            cutout: '70%'
        }
    });

    // 页面滚动时导航栏样式变化
    window.addEventListener('scroll', function() {
        const header = document.querySelector('header');
        if (window.scrollY > 10) {
            header.classList.add('shadow-lg');
            header.classList.remove('shadow-md');
        } else {
            header.classList.remove('shadow-lg');
            header.classList.add('shadow-md');
        }
    });

    // 侧边栏折叠/展开功能
    const toggleSidebar = () => {
        const sidebar = document.querySelector('aside');
        const main = document.querySelector('main');

        if (sidebar.classList.contains('md:w-64')) {
            sidebar.classList.remove('md:w-64');
            sidebar.classList.add('md:w-16');
            main.classList.remove('md:ml-64');
            main.classList.add('md:ml-16');
        } else {
            sidebar.classList.remove('md:w-16');
            sidebar.classList.add('md:w-64');
            main.classList.remove('md:ml-16');
            main.classList.add('md:ml-64');
        }
    };

    // 模拟新建考试按钮点击事件
    document.querySelector('button:has(.fa-plus)').addEventListener('click', function() {
        alert('新建考试功能已触发！');
    });
</script>
</body>
</html>